<template>
  <section class="product_wrap">
    <!-- 面包屑 -->
    <section class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </section>

    <section class="product_box">
      <section class="product_btn">
        <!-- 添加角色 -->
        <el-button type="primary" @click="dialogVisible = true">添加角色</el-button>
        <div>
          <el-dialog title="添加角色" :visible.sync="dialogVisible" width="40%">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                     label-width="100px" class="demo-ruleForm">
              <el-form-item label="角色名" prop="roleName">
                <el-input type="text" v-model="ruleForm.roleName" autocomplete="off"
                          prefix-icon="el-icon-user">
                </el-input>
              </el-form-item>
              <el-form-item label="角色描述" prop="roleDesc">
                <el-input type="text" v-model="ruleForm.roleDesc" autocomplete="off"
                          prefix-icon="el-icon-suitcase-1">
                </el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false; clearble()">取 消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')" :plain="true">确 定
              </el-button>
            </span>
          </el-dialog>
        </div>
      </section>
      <!-- 渲染数据 -->
      <el-table :data="listApi" stripe style="width: 100%" border>
        <el-table-column width="60" type="expand">
        </el-table-column>
        <el-table-column width="60" type="index">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名" width="607">
        </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述" width="607">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="medium" @click="handleEdit(scope.row.id)" type="primary">编辑
            </el-button>
            <el-button size="medium" type="danger" @click="handleDelete(scope.row.id)">删除
            </el-button>
            <el-button size="medium" type="warning">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑-->
      <div>
        <el-dialog title="修改角色" :visible.sync="dialogBianji" width="40%">
          <el-form :model="ruleForm2" status-icon :rules="rules" ref="ruleForm2"
                   label-width="100px" class="demo-ruleForm2">
            <el-form-item label="角色名" prop="roleName">
              <el-input type="text" v-model="ruleForm2.roleName" autocomplete="off"
                        prefix-icon="el-icon-user">
              </el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
              <el-input type="text" v-model="ruleForm2.roleDesc" autocomplete="off"
                        prefix-icon="el-icon-suitcase-1">
              </el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogBianji = false; clearble()">取 消</el-button>
            <el-button type="primary" :plain="true" @click="ascertain('ruleForm2')">确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 分配权限 -->
      <div>

      </div>
    </section>
  </section>
</template>

<script>
  export default {
    name: 'ProductView',
    data() {
      return {
        dialogVisible: false,
        dialogBianji: false,
        //存编辑id
        id: null,
        //响应数据
        listApi: [],
        // tags: [
        //   { name: '标签一', type: '' },
        //   { name: '标签二', type: 'success' },
        //   { name: '标签三', type: 'info' },
        //   { name: '标签四', type: 'warning' },
        //   { name: '标签五', type: 'danger' },
        // ],
        ruleForm: {
          id: '',
          roleDesc: '',
          roleName: '',
        },
        ruleForm2: {
          id: '',
          roleDesc: '',
          roleName: '',
        },
        rules: {
          roleName: [
            { required: true, message: '请输入角色名', trigger: 'blur' },
          ],
          roleDesc: [
            { required: true, message: '请输入角色描述', trigger: 'blur' },
          ],
        },
        //权限分配
        // data: [
        //   {
        //     id: 1,
        //     label: '一级 1',
        //     children: [
        //       {
        //         id: 4,
        //         label: '二级 1-1',
        //         children: [
        //           {
        //             id: 9,
        //             label: '三级 1-1-1',
        //           },
        //           {
        //             id: 10,
        //             label: '三级 1-1-2',
        //           },
        //         ],
        //       },
        //     ],
        //   },
        // ],
      }
    },
    async created() {
      //角色列表的响应数据
      let listApi = await this.$http.getListApi()
      //console.log(listApi)
      this.listApi = listApi.data.data
    },
    methods: {
      //取消事件
      clearble() {
        ;(this.ruleForm.roleDesc = ''), (this.ruleForm.roleName = '')
      },
      //添加角色
      async submitForm(formName) {
        let getAddApi = await this.$http.getAddApi({
          roleDesc: this.ruleForm.roleDesc,
          roleName: this.ruleForm.roleName,
        })
        let listApi = await this.$http.getListApi()
        this.listApi = listApi.data.data

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogVisible = false
            //写提示
            this.$message({
              message: '恭喜你，角色添加成功',
              type: 'success',
            })
            ;(this.ruleForm.roleDesc = ''), (this.ruleForm.roleName = '')
          } else {
            return (this.dialogVisible = true)
          }
        })
      },
      //编辑角色
      async handleEdit(row) {
        //console.log(row)
        this.dialogBianji = !this.dialogBianji
        this.id = row
        let les = this.listApi.find((item) => {
          if (item.id === this.id) {
            return item.id
          }
        })
        console.log(les)
        this.ruleForm2.roleName = les.roleName
        this.ruleForm2.roleDesc = les.roleDesc
        //console.log(this.ruleForm2.roleName)
      },
      //修改角色和重新获取
      async ascertain() {
        this.dialogBianji = false

        this.$message({
          message: '恭喜你，角色修改成功',
          type: 'success',
        })
        let bianjiApi = await this.$http.bianjiApi({
          id: this.id,
          roleDesc: this.ruleForm2.roleDesc,
          roleName: this.ruleForm2.roleName,
        })
        console.log(bianjiApi)
        let listApi = await this.$http.getListApi()
        this.listApi = listApi.data.data
      },
      //删除角色
      handleDelete(row) {
        //row是id
        //console.log(row)
        this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            //删除
            await this.$http.deRoles(row)
            //删除成功再次调用数据
            let listApi = await this.$http.getListApi()
            this.listApi = listApi.data.data
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
    },
  }
</script>

<style scoped lang="scss">
  .product_wrap {
    .breadcrumb {
      margin: 10px 0 20px 0;
    }
    .product_box {
      width: 98%;
      background-color: #fff;
      box-shadow: 1px 1px 3px 4px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      overflow: hidden;
      padding: 20px 20px;
      .product_btn {
        margin: 0 0 20px 0;
      }
    }
  }
</style>